<template>
  <div>
    home
    <img style="width: 50px; height: 50px" :src="state.userInfo.avatar" alt="">

    <button @click="handleLogoutClick">退出按钮</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, watchEffect } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default defineComponent({
  setup(props, context) {

    const state = reactive({
      userInfo: {}
    })

    const store = useStore();
    const router = useRouter();

    const handleLogoutClick = () => {
      store.dispatch('GetLogout').then(res => {
        router.push('/login')
      })
    }

    watchEffect(() => {
      console.log('store', store.getters.userInfo)
      state.userInfo = store.getters.userInfo
    })


    return {
      state,
      handleLogoutClick
    }
  }
})
</script>
